<template>
  <y-popup
    v-if="currData"
    :data.sync="currData"
    v-bind="renderProps"
    v-on="renderEvents"
  ></y-popup>
</template>

<script>
export default {
  props: {
    renderOpts: {
      type: Object,
      default: () => ({})
    },
    params: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      // 当前数据 表单数据
      currData: null,
      // 当前字段
      currField: ''
    }
  },
  computed: {
    // 渲染属性 props
    renderProps() {
      const { props } = this.renderOpts
      const { readonly, disabled } = this.params
      return Object.assign(
        {},
        {
          readonly,
          disabled,
          ...props
        }
      )
    },
    // 渲染事件 events
    renderEvents() {
      const { events } = this.renderOpts
      return Object.assign({}, events)
    }
  },
  watch: {
    // 监听params deep
    params: {
      immediate: true,
      handler(newValue, oldValue) {
        this.load()
      }
    }
  },
  methods: {
    /**
     * 加载数据和字段
     *
     * 该方法用于从组件的参数中提取数据和字段信息，并将其赋值给组件的当前数据和当前字段属性
     * 这样做是为了在组件内部使用这些数据进行进一步的处理或展示
     */
    load() {
      // 获取组件的参数
      const params = this.params
      // 从参数中解构出数据和字段
      const { data, field } = params
      // 将数据和字段分别赋值给组件的当前数据和当前字段属性
      this.currData = data
      this.currField = field
    }
  }
}
</script>

<style lang="scss" scoped></style>
